<template>
	<div class="app-container">
		<div class="zd3">
			<div class="zd3-title">
        <p>
          <span>资产名称</span>
          <el-input v-model="search.propertyName" type="text" class="userselect" placeholder="请输入资产名称" />
        </p>
        <p>
          <span>资产位号</span>
          <el-input v-model="search.weihao" type="text" class="userselect" placeholder="请输入资产位号" />
        </p>
        <p>
          <span>资产类别</span>
          <el-cascader
            :options="zichanfenlei"
            v-model="search.propertyType"
            :show-all-levels="false"
            class="userselect"
            :props="{ checkStrictly: true, value:'id',label: 'name', children:'depositoryDtoList' }"
            clearable></el-cascader>
        </p>
        <el-button size="small" type="success" @click="getList">查询</el-button>
        <el-button size="small" @click="resetList">重置</el-button>
      </div>
			<div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelece" :default-active="activeIndex">
						<el-menu-item v-for="(item,index) in ifydata" :index="index" :key="'id'+index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table :data="tableData" style="width: 100%;border-radius: 8px;" height="560" border v-loading="loading">
              <el-table-column type="index" align="center" width="50" label="序号" />
							<el-table-column align="center" width="150" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="look(scope.row, scope.$index)">查看</el-button>
									<el-popover placement="bottom" width="160">
										<div class="morehandle">
											<el-button type="text" size="small" @click="write(scope.row, scope.$index)">编辑</el-button>
											<el-button type="text" size="small" @click="fenpei(scope.row, scope.$index)">分配人员</el-button>
											<el-button type="text" size="small" v-if="!scope.row.erweima" @click="getEwm(scope.row)">生成二维码</el-button>
											<el-button type="text" size="small" v-if="scope.row.erweima" @click="dayin(scope.row)">打印二维码</el-button>
										</div>
										<el-button type="text" size="mini" slot="reference">
											更多操作
											<i class="el-icon-arrow-down el-icon--right"></i>
										</el-button>
									</el-popover>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="status" width="70" label="状态">
                <template slot-scope="scope">
                  <div
                    class="status"
                    :class="scope.row.status == '使用中' ? 'green' : scope.row.status == '闲置' ? 'yellow' : scope.row.status == '已清理' ? 'red' : scope.row.status == '借用' ? 'blue' : scope.row.status == '维修中' ? 'blue' : 'green'"
                  >{{scope.row.status}}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="照片">
                <template slot-scope="scope">
                  <img :src="scope.row.imgurl" alt="" class="avatar">
                </template>
              </el-table-column>
              <el-table-column align="center" label="二维码">
                <template slot-scope="scope">
                  <img :src="scope.row.erweima" alt="" class="avatar">
                </template>
              </el-table-column>
              <el-table-column align="left" prop="propertySn" width="150" label="资产SN编码" />
              <el-table-column align="left" prop="propertyName" width="150" label="资产名称" />
              <el-table-column align="left" prop="propertyType" width="150" label="资产类别" />
              <el-table-column align="left" prop="propertyGuige" width="150" label="资产规格" />
              <el-table-column align="left" prop="weihao" width="150" label="位号" />
              <el-table-column align="left" prop="xuhao" width="150" label="设备序列号" />
              <el-table-column align="left" prop="bianma" width="150" label="设备生产编码" />
              <!-- <el-table-column align="left" prop="canshu" width="150" label="设备参数" /> -->
							<el-table-column align="center" width="200" label="设备参数" >
								<template slot-scope="scope">
									<div class="ellisp">{{scope.row.canshu}}</div>
								</template>
							</el-table-column>
              <el-table-column align="left" prop="runhua" width="150" label="润滑方式" />
              <el-table-column align="left" prop="baoyang" width="150" label="保养类型" />
              <el-table-column align="left" prop="propertyJine" width="100" label="金额" />
              <el-table-column align="left" prop="propertyNums" width="80" label="数量" />
              <el-table-column align="left" prop="purchaseTime" width="100" label="购买时间" />
              <el-table-column align="left" prop="companys" width="100" label="使用公司" />
              <el-table-column align="left" prop="departments" width="100" label="使用部门" />
              <el-table-column align="left" prop="usePerson" width="100" label="使用人" />
              <el-table-column align="left" prop="jianxiuren" width="100" label="检修人" />
              <!-- <el-table-column align="left" prop="jixiugong" width="100" label="机修工" /> -->
              <el-table-column align="left" prop="weixiuren" width="100" label="维修人" />
              <el-table-column align="left" prop="areas" width="150" label="区域名称" />
              <el-table-column align="left" prop="storeAreas" width="150" label="存放地址" />
              <el-table-column align="left" prop="belongCompany" width="150" label="所属公司" />
              <el-table-column align="left" prop="suppliers" width="150" label="供应商" />
              <el-table-column align="left" prop="serviceLife" width="100" label="使用期限" />
              <el-table-column align="left" prop="sourceOf" width="100" label="来源" />
            </el-table>
            <el-pagination
              background
              align="right"
              layout="prev, pager, next"
              :page-count="bumentotal"
              @current-change="goBumenPage"
              @prev-click="goBumenPrev"
              @next-click="goBumenNext"
            />
					</div>
				</div>
			</div>
		</div>
		<!-- 打印二维码 -->
    <el-dialog
      :visible.sync="ewmShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="70"
    >
      <div id="ewmdayin">
        <img :src="ewmimg" alt />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ewmShow = false">取消</el-button>
        <el-button type="primary" v-print="'#ewmdayin'">打印</el-button>
      </div>
    </el-dialog>
		<el-dialog
     :visible.sync="fenpeishow" 
     :close-on-click-modal="false" 
     title="分配人员" 
     :modal-append-to-body="false" 
     :modal="true" 
     width="85%"
     >
      <div class="dialog">
        <div class="change">
          <p>
            <span>位号</span>
            <input type="text" v-model="tempData.weihao" placeholder="请输入位号" />
          </p>
          <p>
            <span>润滑方式</span>
            <input type="text" v-model="tempData.runhua" placeholder="请输入润滑方式" />
          </p>
          <p>
            <span>保养类型</span>
            <input type="text" v-model="tempData.baoyang" placeholder="请输入保养类型" />
          </p>
          <p>
            <span>巡检周期</span>
            <el-select 
              v-model="tempData.maintainCycle"
              filterable
              allow-create
              default-first-option 
              placeholder="请选择巡检周期" 
              class="userselect">
              <el-option
                v-for="item in xunjian"
                :key="item.id"
                :label="item.names"
                :value="item.names"
              ></el-option>
            </el-select>
          </p>
          <p>
            <span>维修人员</span>
            <el-input placeholder="请输入维修人员" v-model="tempData.weixiuren" class="userselect">
              <el-button slot="append" icon="el-icon-s-custom" @click="checkBuyer1"></el-button>
            </el-input>
            <!-- <input type="text" v-model="tempData.weixiuren" placeholder="请输入维修人员" /> -->
          </p>
          <p>
            <span>检修人员</span>
            <el-input placeholder="请输入检修人员" v-model="tempData.jianxiuren" class="userselect">
              <el-button slot="append" icon="el-icon-s-custom" @click="checkBuyer2"></el-button>
            </el-input>
            <!-- <input type="text" v-model="tempData.jianxiuren" placeholder="请输入检修人员" /> -->
          </p>
          <!-- <p>
            <span>机修工</span>
            <el-input placeholder="请输入机修工" v-model="tempData.jixiugong" class="userselect">
              <el-button slot="append" icon="el-icon-s-custom" @click="checkBuyer3"></el-button>
            </el-input>
          </p> -->
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fenpeishow = false" size="small">取消</el-button>
        <el-button type="primary" :disabled="isClick" @click="save" size="small">完成</el-button>
      </div>
    </el-dialog>
    <!-- 维修人员 -->
    <el-dialog title="维修人员" :visible.sync="buyerShow1" width="80%" top="20px">
      <div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelecePeople" default-active="0">
						<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table 
              :data="peopleData" 
              height="400" 
              highlight-current-row
              @current-change="handlePeople1"
              style="margin-bottom: 20px;" 
              :show-header="true" >
							<el-table-column align="center" prop="username" label="姓名"></el-table-column>
							<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
							<el-table-column align="center" prop="sex" label="性别"></el-table-column>
							<el-table-column align="center" prop="power" label="职务"></el-table-column>
						</el-table>
						<el-pagination background hide-on-single-page align="right" :page-size="50" layout="prev, pager, next" :total="totalPeo" @prev-click="goPrev" @next-click="goNext" />
					</div>
				</div>
			</div>
    </el-dialog>
    <!-- 检修人员 -->
    <el-dialog title="检修人员" :visible.sync="buyerShow2" width="80%" top="20px">
      <div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelecePeople" default-active="0">
						<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table 
              :data="peopleData" 
              height="400" 
              highlight-current-row
              @current-change="handlePeople2"
              style="margin-bottom: 20px;" 
              :show-header="true" >
							<el-table-column align="center" prop="username" label="姓名"></el-table-column>
							<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
							<el-table-column align="center" prop="sex" label="性别"></el-table-column>
							<el-table-column align="center" prop="power" label="职务"></el-table-column>
						</el-table>
						<el-pagination background hide-on-single-page layout="prev, pager, next" align="right" :page-size="50" :total="totalPeo" @prev-click="goPrev" @next-click="goNext" />
					</div>
				</div>
			</div>
    </el-dialog>
    <!-- 机修工 -->
    <el-dialog title="机修工" :visible.sync="buyerShow3" width="80%" top="20px">
      <div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelecePeople" default-active="0">
						<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table 
              :data="peopleData" 
              height="400" 
              highlight-current-row
              @current-change="handlePeople3"
              style="margin-bottom: 20px;" 
              :show-header="true" >
							<el-table-column align="center" prop="username" label="姓名"></el-table-column>
							<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
							<el-table-column align="center" prop="sex" label="性别"></el-table-column>
							<el-table-column align="center" prop="power" label="职务"></el-table-column>
						</el-table>
						<el-pagination background hide-on-single-page :page-size="50" align="right" layout="prev, pager, next" :total="totalPeo" @prev-click="goPrev" @next-click="goNext" />
					</div>
				</div>
			</div>
    </el-dialog>
	</div>
</template>

<script>
let navindex = null,navindexPeo = null;
import { getFenlei,rukuList,updateRuku,createEwm,getSeting } from "@/api/caigou"
import { getUser,deleteUser,getBumenNew } from '@/api/people'
import { format } from 'util';
export default {
	data() {
		return {
			username: '',  //用户名
			workname: '',  //职称
			userphone: '', //电话
			total: 1,
			pages: 1,
			pagePeo: 1,
			totalPeo: 1,
			showHeader: false,
			loading: false,
			activeIndex: -1,  //选中下标
			checkedId: '',
      peopleData: [],
      search: {},
			ifydata: [],
			dialogVisible: false,
			tempData: '',
			tempId: '',
			ewmShow: false,    //二维码显示状态
      ewmimg: '',   //显示二维码
      tempIndex: -1,
      zichanfenlei: [],
			bumentotal: 1,
			fenpeishow: false,  //分配人员
			buyerShow1: false,
      buyerShow2: false,
      buyerShow3: false,
		};
	},
	mounted(){
		navindex = null
		// this.getList()
    this.getbumens()
		this.getClassify()
		this.getSet()
  },
	methods: {
    // 获取资产分类
    getClassify(){
      getFenlei({}).then(res => {
        console.log('分类',res)
        this.zichanfenlei = res.data
      })
    },
		getbumens(){
			getBumenNew({}).then((res) => {
        console.log("----------------");
        console.log(res);
        let temp = res.data.filter(item => item.ids === '456')[0].departmentsList
        console.log(temp)
        temp.map((item) => {
          item.value = item.departments;
          return item;
        });
        this.ifydata = temp;
      });
		},
		 // 人员列表
    getpeople(id) {
      console.log("id:", id);
      getUser({ departments: id }).then((res) => {
        console.log(res);
				this.peopleData = res.data.list;
				this.totalPeo = res.data.total
      });
    },
    // 选择人员分类
    handleSelecePeople(index) {
      console.log(index);
      console.log("ifydata:", this.ifydata[index]);
      navindexPeo = this.ifydata[index].value
        ? this.ifydata[index].value
        : null;
      this.getpeople(navindexPeo);
    },
		// 显示打印二维码窗口
    dayin(item) {
      console.log(item);
      this.ewmShow = true;
      this.ewmimg = item.erweima;
    },
		// getList(){
		// 	const param = {
		// 		username: this.username ? this.username : null,
		// 		departments: navindex ? navindex : null,
		// 		power: this.workname ? this.workname : null,
		// 		phone: this.userphone ? this.userphone : null,
		// 		currentPage: this.pages
		// 	}
		// 	getUser(param).then(res => {
		// 		console.log(res)
		// 		this.peopleData = res.data.list
		// 		this.total = res.data.total
		// 		this.loading = false
		// 	})
		// },
		// 生成二维码
    getEwm(item) {
      console.log(item);
      createEwm({ id: item.oid }).then(res => {
        console.log(res);
        return new Promise((resolve,rejects) => {
          resolve(res)
        })
      }).then(res => {
        item.erweima = res.data
        delete item.propertyType
        updateRuku(item).then(res => {
          console.log(res)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.getList()
        })
      })
    },
    // 查看详情
    look(item, index) {
      console.log(item, index);
      this.$router.push({
        name: "Zichanmingxi",
        params: {
          options: JSON.stringify(item),
          zichan: true
        },
      });
		},
		// 获取资产列表
    getList() {
      this.loading = true
      this.search.ptype = "已确认"
			this.search.departments = navindex ? navindex : null
			this.search.currentPage = this.pages
      this.search.propertyType = this.search.propertyType ? this.search.propertyType[this.search.propertyType.length-1] : null
      rukuList(this.search).then((res) => {
        console.log(res)
				this.tableData = res.data.list
				this.bumentotal = res.data.pages
        this.loading = false;
      });
    },
		// 切换导航
		handleSelece(index){
			this.loading = true
			console.log(index)
			console.log(this.ifydata[index])
			navindex = this.ifydata[index].value
			this.pages = 1
			this.getList()
		},
		// 编辑操作
    write(item, index) {
      console.log(item);
      this.$router.push({
        name: "Writeweixiugongzichan",
        params: {
          options: JSON.stringify(item),
        },
      });
    },
		// 分配人员
		fenpei(item, index) {
      console.log(item);
      this.fenpeishow = true
      this.tempData = item
		},
		// 获取设置巡检周期
		getSet(){
      getSeting({}).then(res => {
        // status 1代表公司类型,2.地区名称,3.存放仓库,4.来源,5.资产类型,6.使用期限,7.供应商,8.巡检周期 
        console.log('seting',res)
        // 公司类型
        let zhouqi = res.data.filter(item => item.status === '8')
        this.xunjian = zhouqi.map(item => {
          item.names = item.names+'天'
          return item
        })
      })
		},
		// 选择维修人
    checkBuyer1() {
      this.buyerShow1 = true;
    },
    // 选择检修人
    checkBuyer2() {
      this.buyerShow2 = true;
    },
    // 选择机修工
    checkBuyer3() {
      this.buyerShow3 = true;
    },
    // 选择维修人
    handlePeople1(row) {
      console.log(row);
      this.tempData.weixiuren = row.username;
      this.buyerShow1 = false;
    },
    // 选择检修人
    handlePeople2(row) {
      console.log(row);
      this.tempData.jianxiuren = row.username;
      this.buyerShow2 = false;
    },
    // 选择机修工
    handlePeople3(row) {
      console.log(row);
      this.tempData.jixiugong = row.username;
      this.buyerShow3 = false;
		},
		save(item) {
      console.log(this.tempData)
      delete this.tempData.propertyType
      console.log(this.tempData)
      // console.log('分配机修工',obj)
      updateRuku(this.tempData).then(res => {
        console.log(res)
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.fenpeishow = false
        this.getList()
      })
    },
		// look(item){
		// 	this.$router.push({
		// 		name:'Lookpersonnel',
		// 		params: {
		// 			options: JSON.stringify(item)
		// 		}
		// 	})
		// },
		// write(item, index) {
		// 	this.$router.push({
		// 		name: 'Writepersonnel',
		// 		params: {
		// 			options: JSON.stringify(item)
		// 		}
		// 	})
		// },
		// deleteRow(item) {
		// 	console.log('删除');
		// 	deleteUser(item.userId).then(res => {
		// 		console.log(res)
		// 		this.$message({
		// 			showClose: true,
		// 			message: res.message,
		// 			type: 'success'
		// 		})
		// 		this.getList()
		// 	}) 
    // },
    goBumenPage(page) {
      this.pages = page;
      this.getList();
    },
    goBumenPrev(page) {
      console.log(page);
      this.pages--;
      this.getList();
    },
    goBumenNext(page) {
      this.pages++;
      this.getList();
      console.log(page);
    },
		goPrev(page) {
			console.log(page);
			this.pagePeo--
			this.getpeople(navindexPeo)
		},
		goNext(page) {
			console.log(page);
			this.pagePeo++
			this.getpeople(navindexPeo)
		},
		goPage(page){
			this.pagePeo = page
			this.getpeople(navindexPeo)
		},
		resetList() {
			this.username = ''
			this.workname = ''  //职称
			this.userphone = ''
		},
		addPeo(item) {
			this.$router.push({name: 'Writepersonnel'})
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e !important;
	border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
	background: #18a05e !important;
	border-color: #18a05e !important;
	color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
	color: #18a05e;
	background-color: transparent;
}
/deep/.el-button--primary {
	color: #fff;
	background-color: #18a05e;
	border-color: #18a05e;
}
/deep/.el-button--text {
	color: #00c666 !important;
}
.ellisp{
	width: 100%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-align: center;
}

.app-container {
	padding: 20px;
}
.morehandle {
  display: flex;
  flex-direction: column;
}
#ewmdayin {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  > img {
    width: 300px;
    height: 300px;
  }
}
.status {
	border-radius: 3px;
	font-size: 12px;
	width: 50px;
	color: #fff;
	background: #777777;
	margin: 0 auto;
}
.status-active {
	background: #18a05e;
}
.red {
  background: #ff0000;
}
.green {
  background: #18a05e;
}
.yellow {
  background: #f8c419;
}
.blue {
  background: #078fff;
}
.inps {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding-left: 10px;
	background: none;
	border: none;
	color: #333;
}
.inps-active {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding-left: 10px;
	// background:#ccc;
	border: none;
	color: #333;
}
.zd3-title {
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);

  > p {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    margin-right: 20px;
    /deep/.el-input__inner {
      background: none;
      height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      flex: 1;
    }

    > span {
      display: block;
      width: 100px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }

  > h3 {
    // width: 64px;
    height: 32px;
    background: #18a05e;
    border-radius: 3px;
    margin: 0 30px 0 0;
    padding: 0 15px;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }

  > h4 {
    padding: 0 15px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 100;
    text-align: center;
    cursor: pointer;
  }
}
.files {
	display: flex;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin-top: 20px;
	overflow: hidden;
	padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e !important;
  color: #fff;
}
.files-btm /deep/.btn-prev:after {
  content: "上一页";
}
.files-btm /deep/.btn-next:before {
  content: "下一页";
}
.files-btm /deep/.btn-prev,
.files-btm /deep/.btn-next {
  width: 65px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.avatar{
	width: 30px;
	height: 30px;
}
.files-left {
	width: 160px;
	margin-right: 20px;
	height: 65vh;
	overflow-y: auto;
	/deep/.el-menu{
		border-right: none;
	}
	/deep/.el-menu-item{
		height: 35px;
		line-height: 35px;
		margin-bottom: 8px;
	}
	/deep/.el-menu-item.is-active{
		color: #fff;
		border-radius: 5px;
		background: rgba(24,160,94,.8);
	}
}
.files-right {
	flex: 1;
	overflow: hidden;
}
.files-btm {
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	// margin-top: 20px;
	overflow: hidden;
	&-title {
		display: flex;
		align-items: center;
		height: 45px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		background: #ffffff;
		> p {
			text-align: center;
			font-size: 14px;
			color: #333;
		}
	}
	.el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
	.addDate {
		margin: 20px 32px 10px 32px;
		height: 32px;
		border-radius: 3px;
		text-align: center;
		line-height: 32px;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		border: 1px dashed rgba(0, 0, 0, 0.3);
	}
	.el-button--text {
		margin: 0 5px;
	}
}
.change {
	display: flex;
	flex-wrap: wrap;
	> p {
		width: 50%;
		font-size: 14px;
		display: flex;
		align-items: center;
		color: #333;
		/deep/.el-input__inner {
			width: inherit;
			background: none;
			height: 32px;
			// line-height: 32px;
			color: #333;
			border: 1px solid rgba(0, 0, 0, 0.1);
			padding: 0 25px;
		}
		/deep/.el-input__icon {
			line-height: 32px;
		}
		.userselect {
			flex: 1;
		}

		> span {
			display: block;
			width: 120px;
			text-align: right;
			padding-right: 15px;
		}
		> input {
			width: inherit;
			flex: 1;
			height: 32px;
			border-radius: 3px;
			border: 1px solid rgba(0, 0, 0, 0.1);
			padding-left: 10px;
			color: #333;
		}
	}
}
</style>
